import { h, ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'
import { NButton, NIcon, NTooltip } from 'naive-ui'
import EditOutlined from '@vicons/antd/es/EditOutlined'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const userPrivilegeColumnsRef = ref({
    userPrivilegeColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })
  const proPrivilegeColumnsRef = ref({
    proPrivilegeColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const userPrivilegeColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('user.username'),
        key: 'username',
        align: 'center',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.privilege'),
        key: 'privilege',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h('span', {}, rowData.privilege.join(',')),
            h(
              NTooltip,
              { trigger: 'hover' },
              {
                trigger: () =>
                  h(
                    NButton,
                    {
                      circle: true,
                      type: 'info',
                      size: 'tiny',
                      style: { marginLeft: '5px' },
                      onClick: () =>
                        void onCallback({ rowData }, 'modUserPrivilege')
                    },
                    () => h(NIcon, null, () => h(EditOutlined))
                  ),
                default: () => t('dataManage.modPrivilege')
              }
            )
          ])
      }
    ] as TableColumns

    userPrivilegeColumnsRef.value = {
      userPrivilegeColumns,
      tableWidth: calculateTableWidth(userPrivilegeColumns)
    }

    const proPrivilegeColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('project.name'),
        key: 'proName',
        align: 'center',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.privilege'),
        key: 'privilege',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h('span', {}, rowData.privilege.join(',')),
            h(
              NTooltip,
              { trigger: 'hover' },
              {
                trigger: () =>
                  h(
                    NButton,
                    {
                      circle: true,
                      type: 'info',
                      size: 'tiny',
                      style: { marginLeft: '5px' },
                      onClick: () =>
                        void onCallback({ rowData }, 'modProPrivilege')
                    },
                    () => h(NIcon, null, () => h(EditOutlined))
                  ),
                default: () => t('dataManage.modPrivilege')
              }
            )
          ])
      }
    ] as TableColumns

    proPrivilegeColumnsRef.value = {
      proPrivilegeColumns,
      tableWidth: calculateTableWidth(proPrivilegeColumns)
    }
  }

  onMounted(() => {
    createColumns()
  })

  watch(useI18n().locale, () => {
    createColumns()
  })

  return {
    userPrivilegeColumnsRef,
    proPrivilegeColumnsRef,
    createColumns
  }
}
